<template>
	<div class="channel-container-101">
		<div class="box">
			<!-- <scroll-view
				class="select-box-scroll"
				:scroll-y="true"
			> -->
			<div class="select-box-scroll">
				<div
					v-for="(item, index) in tabList"
					class="item"
					:key="index"
					:info="item"
					@click="handleClickItem(item, index)"
					:class="{ selected: isSelected(item) }"
				>
					<div class="left">
						<div class="radio">
							<div class="icon">
								<IconFont
									v-if="!isSelected(item)"
									name="check-normal"
								></IconFont>
								<image
									style="width: 15px; height: 15px; border-radius: 50%"
									v-if="isSelected(item) && item.selectNum == 1"
									src="../../assets/images/zhu.png"
								></image>
								<image
									style="width: 15px; height: 15px; border-radius: 50%"
									v-if="isSelected(item) && item.selectNum == 2"
									src="../../assets/images/bei.png"
								></image>
							</div>
						</div>
						<div class="img">
							<image
								:src="item.icon"
								style="width: 100%; height: 100%; border-radius: 50%"
							></image>
						</div>
						<div class="type">
							<div class="name">
								<text style="margin-right: 5px"> {{ item.name }}</text>
								<IconFont
									name="ask"
									@click.stop="handleClickTip(item)"
									color="#999"
									size="12"
								></IconFont>
							</div>
							<div class="support">{{ item.text }}</div>
						</div>
					</div>
					<div
						class="right"
						v-if="isShowPrice == 1"
					>
						<div class="text">{{ item.tip }}:</div>
						<div
							class="price"
							v-if="item.netPrice && item.isGet == 1"
						>
							{{ "￥" + (item.netPrice / 100).toFixed(2) }}
						</div>
						<div
							class="price"
							v-else-if="
								item.netPrice == 0 && requestTime == 0 && item.isGet == 1
							"
						>
							暂不支持
						</div>
						<div
							class="price"
							v-else-if="item.isGet == 0"
						>
							暂不支持
						</div>
						<div v-else>{{ requestTime }}s</div>
					</div>
				</div>
			<!-- </scroll-view> -->
			</div>
		</div>
		<!-- 提示 -->
		<nut-dialog
			:style="{ width: '80%', height: '20%' }"
			round
			no-cancel-btn
			no-ok-btn
			title="温馨提示"
			:content="itemInfo?.desc"
			v-model:visible="tipShow"
		>
			{{ itemInfo?.desc }}
		</nut-dialog>
	</div>
</template>
<script setup>
import { onMounted, reactive, ref, toRefs, watch } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
const props = defineProps({
	tabList: Array,
	rateList: Array,
	arealist: Array,
	selectedSeat: Array,
	isShowPrice: Number,
	selectedChannelList: Array,
	requestTime: Number,
	screenHeight: Number,
	screenWidth: Number,
});
const tipShow = ref(false);
const {
	tabList,
	rateList,
	arealist,
	selectedSeat,
	isShowPrice,
	selectedChannelList,
	requestTime,
	screenHeight,
	screenWidth,
} = toRefs(props);
const emit = defineEmits(["onSelectedChannel"]);
const selectedChannel = ref(selectedChannelList.value);
const itemInfo = ref({}); //每一项数据
//点击当前的问号
const handleClickTip = (item) => {
	console.log(screenHeight, screenWidth, "screenHeightscreenWidth");
	itemInfo.value = item;
	tipShow.value = true;
};
//选中渠道
const handleClickItem = (item, index) => {
	const currentIndex = selectedChannel.value.findIndex((i) => i.id === item.id);
	if (currentIndex !== -1) {
		// 如果已选中，则取消选择
		selectedChannel.value.splice(currentIndex, 1);
	} else {
		// 如果没有达到最大选择数，则添加选择
		if (selectedChannel.value.length < 2) {
			// 1 主2 备
			selectedChannel.value.push(item);
			if (selectedChannel.value.length == 1) {
				selectedChannel.value[0].selectNum = 1;
			}
			if (selectedChannel.value.length == 2) {
				selectedChannel.value[0].selectNum = 1;
				selectedChannel.value[1].selectNum = 2;
			}
		}
	}
	emit("onSelectedChannel", selectedChannel.value);
};
watch(
	selectedChannel.value,
	(newVal, oldVal) => {
		if (newVal.length == 1) {
			selectedChannel.value[0].selectNum = 1;
			selectedChannel.value = newVal;
		}
	},
	{ immediate: true }
);
// 判断是否选中
const isSelected = (item) => {
	return selectedChannel.value.some((i) => i.id === item.id);
};
</script>
<style lang="less">
.channel-container-101 {
	
	.box {
		background-color: #fff;
		padding: 20px;
		.select-box-scroll {
			// height: 600px;
			.item {
				padding: 25px 30px;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24px;
				color: #858a99;
				border: 1px solid #f7f8f9;
				border-radius: 5px;
				.left {
					display: flex;
					align-items: center;
					.radio {
						margin-right: 20px;
						.icon {
							width: 40px;
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
					.img {
						width: 70px;
						height: 70px;
					}
					.type {
						margin-left: 25px;
						display: flex;
						flex-direction: column;
						.name {
							color: #15181d;
							font-weight: 700;
							font-size: 28px;
							display: flex;
							align-items: center;
						}
						.support {
							color: #858a99;
							margin-top: 5px;
						}
					}
				}
				.right {
					display: flex;
					align-items: center;
					.text {
						color: #15181d;
						font-size: 22px;
					}
					.price {
						color: #5232b7;
						font-size: 26px;
						margin-left: 15px;
						font-weight: 700;
					}
				}
			}
		}
		.item:nth-child(n + 2) {
			margin-top: 10px;
		}
		.selected {
			border: 1px solid #5232b7;
			background-color: #f2e9ff;
			border-radius: 5px;
		}
	}
}
</style>
